<template>
  <div class="foodsListAll">
    <div class="foodsList" :style="{height:foodListHeight}">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item v-for="(item,index) in foodList" :key="item.id"
                          @click="navClick(index)">
          <template #title>
            <p class="navTitle">{{item.name}}</p>
          </template>
        </van-sidebar-item>
        <div class="paddingBottom"></div>
      </van-sidebar>
      <div class="content" ref="content" @scroll="contentScroll">
        <div class="moveDiv">
          <dl ref="foodClass" v-for="item in foodList" :key="item.id">
            <dt class="title">{{item.name}}<span>{{item.description}}</span></dt>
            <dd class="info" v-for="el in item.foods" :key="el.id">
              <i class="newIcon" v-show="el.attributes[1]">
                <span>新品</span>
              </i>
              <img v-lazy="imgBaseUrl+el.image_path" alt="">
              <div class="main">
                <p class="foodTitle">
                  <b>{{el.name}}</b>
                  <span v-show="el.attributes[1]">招牌</span>
                </p>
                <p class="foodSale">
                  {{el.tips}}
                </p>
                <div class="price">
                  <div class="sellPrice">
                    <i>￥</i>
                    <b>{{Number(el.specfoods[0].price).toFixed(2)}}</b>
                  </div>
                  <van-stepper :class="{disabled:el.foodNum===0}" v-model="el.foodNum"
                               theme="round"
                               button-size="26"
                               disable-input min="0"
                               default-value="0"
                               @change="sumNum(el)"/>
                </div>
              </div>
            </dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="shopInfo-footer">
      <div class="sumPrice">
        <van-icon
          :style="{background: foodCartNum>0?'#3190e8':''}"
          name="shopping-cart" :badge="foodCartNum>99?'99+':foodCartNum"
          :class="{unShow:foodCartNum<=0}"
          @click="letBottomShow"/>
        <div class="priceTxt">
          <b>￥{{sumPrice.toFixed(2)}}</b>
          <span>{{shopInfo.tips}}</span>
        </div>
      </div>
      <div class="settle">
        <van-button v-if="canSettle<=0" class="active button" type="primary">去结算</van-button>
        <div v-else class="disabled button">还差¥{{canSettle}}起送</div>
      </div>
    </div>
    <van-popup class="bottomCart" v-model="bottomShow" position="bottom">
      <div class="cartHeader">
        <b>购物车</b>
        <span @click="clearCart"><van-icon name="delete-o"/> 清空</span>
      </div>
      <ul class="cartContent">
        <li v-for="item in foodCart" :key="item.item_id">
          <b>{{item.name}}</b>
          <div class="calcPrice">
            <span class="price">￥{{Number(item.specfoods[0].price).toFixed(2)}}</span>
            <van-stepper :class="{disabled:item.foodNum<=0}" v-model="item.foodNum"
                         theme="round"
                         button-size="26"
                         disable-input min="0"
                         default-value="0"
                         @change="sumNum(item)"/>
          </div>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'FoodsList',
  props: {
    shopId: {
      type: String
    },
    shopInfo: {
      type: Object
    }
  },
  data: () => ({
    foodList: [],
    activeKey: 0,
    isMove: true,
    foodCart: [], // 购物车中商品的数据
    foodCartAll: {}, // 购物车中整体数据
    bottomShow: false
  }),
  created () {
    this.getFoodList()
    this.getFoodCart()
  },
  methods: {
    // 获取食物列表
    async getFoodList () {
      const { data } = await this.$http.getFoodList(this.shopId)
      data.forEach(el => {
        el.foods.forEach(elFood => {
          for (const item of this.foodCart) {
            if (elFood.item_id === item.item_id) {
              elFood.foodNum = item.foodNum
              break
            } else {
              elFood.foodNum = 0
            }
          }
        })
      })
      this.foodList = data
    },
    // 导航栏点击事件
    navClick (index) {
      this.isMove = false
      // 获取食品分类元素元素
      const foodClasses = this.$refs.foodClass
      // 计算对应的dl到顶部的距离
      this.$refs.content.scrollTop = foodClasses[index].offsetTop
      setTimeout(() => {
        this.isMove = true
      }, 10)
    },
    // 滚动条事件
    contentScroll () {
      // 获取食品分类元素元素
      const foodClasses = this.$refs.foodClass
      foodClasses.forEach((el, index) => {
        const disTop = el.offsetTop - this.$refs.content.scrollTop
        if (disTop <= 0 && this.isMove) {
          this.activeKey = index
          document.getElementsByClassName('van-sidebar')[0].scrollTop = document.getElementsByClassName('van-sidebar-item')[index].offsetTop - parseInt(this.foodListHeight) * 15
        }
      })
    },
    // 获取购物车中的内容
    getFoodCart () {
      this.foodCartAll = JSON.parse(localStorage.getItem('foodCartAll') || '{}')
      for (const key in this.foodCartAll) {
        if (key === this.shopId) {
          this.foodCart = this.foodCartAll[key]
          console.log(this.foodCart)
          return
        }
      }
      this.foodCartAll[this.shopId] = this.foodCart
    },
    // 改变商品数量的事件
    sumNum (el) {
      let flag = el.foodNum
      for (const [key, val] of this.foodCart.entries()) {
        if (val.item_id === el.item_id) {
          if (el.foodNum <= 0) {
            this.foodCart.splice(key, 1)
          } else {
            this.foodCart[key].foodNum = el.foodNum
          }
          flag = false
          break
        }
      }
      if (flag) this.foodCart.push(el)
      // 存入本地
      localStorage.setItem('foodCartAll', JSON.stringify(this.foodCartAll))
      // 判断是否隐藏购物车
      if (this.foodCart.length <= 0) {
        this.bottomShow = false
      }
    },
    // 操作购物车的显示与隐藏
    letBottomShow () {
      if (this.foodCart.length > 0) {
        this.bottomShow = !this.bottomShow
      }
    },
    // 清空购物车
    clearCart () {
      this.foodCart.splice(0, this.foodCart.length)
      // 存入本地
      localStorage.setItem('foodCartAll', JSON.stringify(this.foodCartAll))
      // 隐藏购物车
      this.bottomShow = false
      // 重置foodList中的foodNum
      this.foodList.forEach(el => {
        el.foods.forEach(elFood => {
          elFood.foodNum = 0
        })
      })
    }
  },
  computed: {
    foodListHeight () {
      return (document.documentElement.clientHeight - 36) / 60 + 'rem'
    },
    canSettle () {
      return this.shopInfo.float_minimum_order_amount - this.sumPrice
    },
    sumPrice () { // 获取总价格
      let sum = 0
      this.foodCart.forEach(el => {
        sum += el.foodNum * el.specfoods[0].price
      })
      return sum
    },
    // 获取购物车商品数量
    foodCartNum () {
      let sum = 0
      this.foodCart.forEach(el => {
        sum += el.foodNum
      })
      return sum
    }
  }
}
</script>

<style lang="scss" scoped>
  .foodsListAll {
    .van-stepper {
      /deep/ .van-stepper__input {
        font-size: 26px;
        color: #666666;
        transition: all 0.3s;
      }

      /deep/ .van-stepper__plus {
        width: 26px !important;
        height: 26px !important;
        background: #3190e8;

        &::before {
          height: 1px;
        }

        &::after {
          width: 1px;
        }
      }

      /deep/ .van-stepper__minus {
        width: 25px !important;
        height: 25px !important;
        transition: all 0.3s;
        color: #3190e8;
        border: 1px solid #3190e8;

        &::before {
          height: 1px;
        }
      }
    }

    .foodsList {
      display: flex;
      background: #f5f5f5;
      overflow-y: auto;
      color: #333333;

      ::-webkit-scrollbar {
        width: 0 !important;
      }

      .van-sidebar {
        width: 142px;
        height: 100%;
        overflow-y: auto;
        position: relative;

        .van-sidebar-item {
          height: 80px;
          background: transparent;
          border-bottom: 1px solid #eeeeee;
          border-right: 1px solid #eeeeee;
          font-size: 22px;
          text-align: center;
          line-height: 39px;
          color: #666666;

          /deep/ .van-sidebar-item__text {
            width: 100%;
            height: 100%;

            .navTitle {
              margin: 0;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }

        /deep/ .paddingBottom {
          height: 60px;
        }

        .van-sidebar-item--select {
          background: #ffffff;
          font-weight: bold;

          &::before {
            background: #3190e8;
            height: 60px;
          }
        }
      }

      .content {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        background: #ffffff;

        .v-touch {
          touch-action: pan-y !important;
        }

        .moveDiv {
          width: 100%;
          position: relative;
        }

        dl {
          margin: 0;

          .title {
            background: #f5f5f5;
            padding: 20px;
            font-size: 26px;
            color: #666666;
            font-weight: bold;

            span {
              font-weight: normal;
              font-size: 16px;
              margin-left: 10px;
              color: #999999;
            }
          }

          .info {
            display: flex;
            margin: 0;
            border-bottom: 1px solid #eeeeee;
            padding: 20px;
            position: relative;
            overflow: hidden;

            .newIcon {
              width: 100px;
              height: 100px;
              text-align: center;
              line-height: 171px;
              font-size: 14px;
              background: #4cd964;
              color: #ffffff;
              font-style: normal;
              position: absolute;
              top: 0;
              left: 0;
              transform: rotateZ(-45deg) translateY(-80px);
            }

            img {
              width: 120px;
              height: 120px;
              margin-right: 10px;
            }

            .main {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex: 1;

              p {
                margin: 0;
              }

              .foodTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #333333;

                span {
                  font-size: 14px;
                  color: rgb(240, 115, 115);
                  border: 1px solid rgb(240, 115, 115);
                  padding: 0 5px 1px;
                  border-radius: 4px;
                }

                b {
                  font-size: 30px;
                  width: 200px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              .foodSale {
                font-size: 18px;
              }

              .price {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #ff6600;
                font-size: 20px;

                i {
                  font-style: normal;
                }

                b {
                  font-size: 26px;
                }

                .disabled {
                  /deep/ .van-stepper__minus {
                    opacity: 0;
                    transform: translateX(62px) rotateZ(180deg);
                  }

                  /deep/ .van-stepper__input {
                    opacity: 0;
                    transform: translateX(30px) rotateZ(180deg);
                  }
                }
              }
            }
          }
        }
      }
    }

    .shopInfo-footer {
      width: 100%;
      height: 75px;
      position: fixed;
      bottom: 0;
      background: #333333;
      display: flex;
      justify-content: space-between;
      color: #ffffff;
      z-index: 3000;

      .sumPrice {
        display: flex;
        align-items: center;

        .van-icon.van-icon-shopping-cart {
          font-size: 50px;
          padding: 15px;
          border: 6px solid #444444;
          background: #333333;
          border-radius: 50%;
          margin-top: -38px;
          margin-left: 20px;
          margin-right: 14px;

          /deep/ .van-info {
            width: 28px;
            height: 28px;
            box-sizing: border-box;
            padding-top: 1px;
            border-radius: 50%;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .unShow {
          /deep/ .van-info {
            display: none !important;
          }
        }

        .priceTxt {
          display: flex;
          flex-direction: column;

          b {
            font-size: 30px;
          }

          span {
            padding-left: 6px;
            font-size: 14px;
          }
        }
      }

      .settle {
        height: 100%;
        position: relative;

        .button {
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 190px;
          font-weight: bold;
          font-size: 26px;
          border-radius: 0;
        }

        .disabled {
          background: #444444;
          text-align: center;
          line-height: 75px;
        }
      }
    }

    .van-popup--bottom {
      bottom: 75px;
    }

    .bottomCart {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 40px;
      max-height: 60%;

      .cartHeader {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        color: #666666;
        background: #eceff1;

        b {
          font-size: 30px;
        }

        span {
          display: flex;
          align-items: center;

          /deep/ .van-icon {
            font-size: 30px;
          }

          font-size: 24px;
        }
      }

      .cartContent {
        li {
          padding: 20px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #eeeeee;
          font-size: 36px;

          .calcPrice {
            display: flex;
            align-items: center;

            .price {
              margin-right: 60px;
              color: #ff6600;
            }
          }
        }
      }
    }
  }
</style>
